<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
	<body oncontextmenu="return false" onselectstart="return false" ondragstart="return false" oncopy="return false" oncut="return false;">
		<title></title>
		</head>
		<style type="text/css">
			.content {
				width: 1200px;
				height: auto;
				margin: 0 auto;

			}

			.main {
				padding-left: 100px;
				padding-right: 100px;
			}


			.cnt3 {
				display: flex;
				flex-direction: column;
				height: 140px;

				justify-content: space-between;

				letter-spacing: 1px;
				font-size: 18px
			}




			.tab1,
			.tab2 {
				width: 240px;
				height: 50px;
				border-radius: 10px;
				border: #999999 solid 1px;
				line-height: 50px;
				text-align: center;
			}

			.select {
				background-color: #006699;
				color: white;
			}

			.item {
				display: flex;
				padding-bottom: 10px;
				padding-top: 10px;
				border-bottom: 1px solid #eee;
			}

			.item:nth-of-type(1) {
				padding-top: 0;
			}

			.item img {
				width: 200px;
				height: 150px;
			}

			.itema {
				padding-top: 10px;
				padding-left: 20px;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

			}

			.title {
				font-size: 20px;
				letter-spacing: 4px;
				font-weight: bold;
			}

			.desc {
				font-size: 16px;
				color: #666666;
				letter-spacing: 1px;
				height: 60px;

				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;

			}

			.info {
				color: #006699;
			}

			.time {
				color: #777;
			}

			.itema p:nth-of-type(3) {
				display: flex;
				justify-content: space-between;
			}

			.a {
				display: flex;

			}

			.cnt2 {
				padding-left: 50px;
			}
		</style>
		<body>
			<div class="content">
				<div class="main">

					<div class="a">
						<div class="cnt3">
							<div class="tab1 select">
								普法宣传
							</div>
							<div class="tab2">
								普法视频
							</div>
						</div>

						<div class="cnta">
							<div class="cnt2">
								<div class="item">
									<img src="img/hy_ditu_1.png">
									<div class="itema">
										<p class="title">今日大事件</p>
										<p class="desc">清明节缅怀烈士清明节缅怀烈士清明节缅怀烈士清明节缅怀烈士清明节缅怀烈士清明节缅怀烈士清明节缅怀烈士清明节缅怀烈士清明节缅怀烈士清明节缅怀烈士清明节缅怀烈士清明节缅怀烈士清明节缅怀烈士清明节缅怀烈士</p>
										<p><span class="info">查看详情</span> <span class="time">2018-09-11</span></p>
									</div>
								</div>
								<div class="item">
									<img src="img/hy_ditu_1.png">
									<div class="itema">
										<p class="title">今日大事件</p>
										<p class="desc">清明节节缅缅怀烈士清明节缅怀烈士清明节缅怀烈士清明节缅怀烈士清明节缅怀烈士清明节缅怀烈士</p>
										<p><span class="info">查看详情</span> <span class="time">2018-09-11</span></p>
									</div>
								</div>
								<div class="item">
									<img src="img/hy_ditu_1.png">
									<div class="itema">
										<p class="title">今日大事件</p>
										<p class="desc">清明节缅怀烈士清明节缅怀烈士清明节缅怀烈士清明节缅怀烈士清明节缅怀烈士清明节缅怀烈士清明节缅怀烈士清明节缅怀烈士清明节缅怀烈士清明节缅怀烈士清明节缅怀烈士清明节缅怀烈士清明节缅怀烈士清明节缅怀烈士</p>
										<p><span class="info">查看详情</span> <span class="time">2018-09-11</span></p>
									</div>
								</div>


							</div>

							<div class="cnt2">
								<div class="item">
									<img src="img/hy_ditu_1.png">
									<div class="itema">
										<p class="title">司法行政要闻</p>
										<p class="desc">清明节缅怀烈士清明节缅怀烈士清明节缅怀烈士清明节缅怀烈士清明节缅怀烈士清明节缅怀烈士清明节缅怀烈士清明节缅怀烈士清明节缅怀烈士清明节缅怀烈士清明节缅怀烈士清明节缅怀烈士清明节缅怀烈士清明节缅怀烈士</p>
										<p><span class="info">查看详情</span> <span class="time">2018-09-11</span></p>
									</div>
								</div>
								<div class="item">
									<img src="img/hy_ditu_1.png">
									<div class="itema">
										<p class="title">司法行政要闻</p>
										<p class="desc">清明节节缅缅怀烈士清明节缅怀烈士清明节缅怀烈士清明节缅怀烈士清明节缅怀烈士清明节缅怀烈士</p>
										<p><span class="info">查看详情</span> <span class="time">2018-09-11</span></p>
									</div>
								</div>
								<div class="item">
									<img src="img/hy_ditu_1.png">
									<div class="itema">
										<p class="title">司法行政要闻</p>
										<p class="desc">清明节缅怀烈士清明节缅怀烈士清明节缅怀烈士清明节缅怀烈士清明节缅怀烈士清明节缅怀烈士清明节缅怀烈士清明节缅怀烈士清明节缅怀烈士清明节缅怀烈士清明节缅怀烈士清明节缅怀烈士清明节缅怀烈士清明节缅怀烈士</p>
										<p><span class="info">查看详情</span> <span class="time">2018-09-11</span></p>
									</div>
								</div>


							</div>






						</div>

					</div>


				</div>
			</div>




			<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
			<script type="text/javascript">
				$(".cnt3 div").click(function() {
					var i = $(this).index();
					$(this).addClass("select").siblings().removeClass("select")
					$('.cnta>div').eq(i).show().siblings().hide();
				})
			</script>
		</body>
</html>
